
import * as echarts from '../../../../ec-canvas/echarts';
import colorObj from '../../../../utils/colorList.js'
const systemInfo = wx.getSystemInfoSync();
const App = getApp();
Component({
  properties: {
  
  },
  data: {
    ec: {
      lazyLoad: true
    },
    countInfo: {},
    activeid: ''
  },
  ready() {
  },
  pageLifetimes: {
    show() {
    }
  },
  methods: {
    countEcharts(data, activeid=1){
      this.setData({
        countInfo: data.result,
        activeid: wx.getStorageSync('activeCate') || activeid
      });
      this.getCateOption();
    },

    // 配置折线图
    getCateOption() {
      const { countInfo } = this.data;
      let time = new Date();
      let y = time.getFullYear();
      let m = ('0' + (time.getMonth() + 1)).slice(-2);
      let d = ('0' + time.getDate()).slice(-2);
      let xAxisLabel = [];
      for (let i = 0;i<= 23;i ++) {
        xAxisLabel.push((y + '-' + m + '-' + d + ' ' + (('0' + i).slice(-2)) + ':00:00'))
      }
      let mychart = this.selectComponent("#mychart-dom-cate");
      let legendArr = [], seriesArr = [];
    
      Object.keys(countInfo.runtime).map((item, index) => {
        legendArr.push({
          name: item,
          textStyle: {
            color: colorObj[item],
            fontSize: 14
          },
          icon: 'circle'
        })
        const yData = countInfo.runtime[item].map((item, index) => {
          // return item = countInfo.cmd === 'daystate' ? (item / 60).toFixed(2) : (item / 3600).toFixed(2)
          return item = this.data.activeid == 1 ? (item / 60).toFixed(2) : (item / 3600).toFixed(2)
        })
        seriesArr.push({
          name: item,
          type: 'bar',
          stack: 1,
          data: yData,
          barWidth: 8,
          itemStyle: {
            normal: {
              color: colorObj[item],
            }
          },
        })
      })
      // 后端数据问题导致修改成上面的代码
      // Object.keys(countInfo.color).map((item,index) => {
      //   legendArr.push({
      //       name: item,
      //       textStyle: {
      //         color: itemColor[item],
      //         fontSize: 14
      //       },
      //       icon: 'circle'
      //   })
      //   const yData = countInfo.runtime[item].map((item, index) => {
      //     return item = countInfo.cmd === 'daystate' ? (item / 60).toFixed(2) : (item/3600).toFixed(2)
      //   })
      //   seriesArr.push({
      //     name: item,
      //     type: 'bar',
      //     stack: 1,
      //     data: yData,
      //     barWidth: 8,
      //     itemStyle: {
      //       normal: {
      //         color: itemColor[item],
      //       }
      //     },
      //   })
      // })
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption({
          legend: {
            data: legendArr
          },
          grid: {
            left: '10%',
            right: '8%',
            top: '25%',
            bottom: '5%',
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            triggerOn: 'click',
            confine: true,
            extraCssText: "z-index:98",
            formatter: function (params) {
              var result = params[0].name;
              params.forEach(function (item) {
                result += "\n" + item.seriesName + ': ' + item.data;
              });
              return result;
            }
          },  
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: 13
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              data: this.data.activeid == 1 ? xAxisLabel : countInfo.labels
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: this.data.activeid == 1 ? '分钟' : '小时',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#9095A5',
                  fontSize: 12
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#9095A5'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#6B6E7B'
                }
              }
            }
          ],
          series: seriesArr
        })
        // 这里加了一层判断 数据都为零的时候不会执行finished方法
        let allNumber = Object.values(countInfo.runtime).reduce((prev,next) => {
          return prev.concat(next)
        },[]).reduce((prev,next) => {
          return prev + next
        },0)
        if (allNumber === 0) {
          this.triggerEvent('myEvent')
        } else {
          Chart.on('finished', () => {
            this.triggerEvent('myEvent')
          })
        }
        return Chart
      })
    },  
  }
})